<link rel="stylesheet" href="home/index.css">
<div id="box">
    <div class="banner">
        <img src="https://resource.smartisan.com/resource/1c17bfb1db7bb0749906e7f2c2dc4ba9.png?x-oss-process=image/resize,w_2440/format,webp/quality,Q_95" alt="">
        <img src="https://resource.smartisan.com/resource/1423427037c227737a007a83ab55faee.png?x-oss-process=image/resize,w_2440/format,webp/quality,Q_95" alt="">
        <img src="https://resource.smartisan.com/resource/1cb5aa879fb2e48b7962d57cb16aacfb.png?x-oss-process=image/resize,w_2440/format,webp/quality,Q_95" alt="">
        <img src="https://resource.smartisan.com/resource/b1313f8eb36550e89be08c1cb6a70f00.png?x-oss-process=image/resize,w_2440/format,webp/quality,Q_95" alt="">
    </div>
    <div class="proList">
        <h3>坚果R2及配件</h3>
        <div class="proCont">
            <div class="bigPro">
                <img src="https://resource.smartisan.com/resource/89c892136594f91195035d4dbce58e38.png?x-oss-process=image/resize,w_1200/format,webp" alt="">
            </div>
        </div>
    </div>
</div>
<script>
    // 商品结构的渲染

    // 开启数据请求
    $.ajax({
        url:"data/pro.json",    // 要请求的数据地址
        dataType:"text",        // 请求到的数据的格式
        success:function(res){  // 请求成功，第一个参数，表示请求成功之后的数据
            // 解析数据，成数组
            res = JSON.parse(res);
            // 拼接数据：字符式
            var str = "";
            for(var i=0;i<res.length;i++){
                // console.log(res[i].proName)
                str = str + `<div class="smallPro"><a href="detail/index.html#${res[i].proId}">
                                <img src="${res[i].proImg}" alt="">
                                <p>${res[i].proName}</p>
                                <p>${res[i].proInfo}</p>
                                <p>${res[i].price}</p>
                            </a></div>`
            }
            // 获取proCont的原数据
            var d = $(".proCont").html();
            // 将proCont的原数据 + 现有数据，再放回proCont这个容器
            $(".proCont").html(d + str);
        }
    })

</script>

<script>
    // 轮播图效果：参考：swiper插件

    // 假设的图片的索引
    var i = 0;
    // 计算图片的个数
    var len = $(".banner").find("img").length;
    // 用来保存计时器
    var t = null;

    // 自动播放
    autoPlay();

    // 创建小圆点的容器
    var bList = $("<ul class='bannerList'>");
    // 循环创建多个小圆点
    for(var j=0;j<len;j++){
        bList.append($("<li>"));
    }
    // 将小圆点的容器插入轮播图
    $(".banner").append(bList);
    // 设置默认小圆点的样式
    setActive();

    // 鼠标进入大框，停止计时器
    $(".banner").mouseenter(function(){
        clearInterval(t);
    })
    // 鼠标离开大框，重新开始自动轮播
    $(".banner").mouseleave(function(){
        autoPlay()
    })

    // 作业：点击小圆点，跳转到对应图片
    bList.find("li").click(function(){
        var index = $(this).index();

        // 设置离开的图片的动画
        $(".banner").find("img").eq(i).stop().fadeOut();
        // 设置进来的图片的动画
        $(".banner").find("img").eq(index).stop().fadeIn();

        i = index;

        setActive();
    })

    // 自动轮播功能
    function autoPlay(){
        clearInterval(t);
        // 开启计时器
        t = setInterval(function(){
            // 计算索引
            if(i === len-1){
                i=0
            }else{
                i++;
            }
            // 设置离开的图片的动画
            $(".banner").find("img").eq(i-1).stop().fadeOut();
            // 设置进来的图片的动画
            $(".banner").find("img").eq(i).stop().fadeIn();
            // 修改小圆点的样式
            setActive()
        }, 4000);
    }

    // 修改小圆点样式的功能
    function setActive(){
        // 给图片索引对应的小圆点添加高亮样式
        bList.find("li").eq(i).css({
            backgroundColor:"#fff"
        }).siblings().css({   // 其他小圆点，设置基础样式
            backgroundColor:"rgba(255,255,255,0.6)"
        })
    }


</script>